body{background:url("../img/backgroundPhyCh.jpg") no-repeat center center/cover}h3{text-transform:uppercase;font-weight:1000;color:#064481;font-size:30px;padding-bottom:30px;text-align:center}p{font-weight:500;font-size:18px;color:#fff}
.container{width:100%;height:100%;scroll-behavior:smooth;transition:.5s;position:absolute;top:0;right:0;z-index:10}
.container.active{right:300px}
section{z-index:1;padding:15px;background:url("../img/backgroundPhyCh.jpg") no-repeat center center/cover;position:relative;background-attachment:fixed;height:100vh;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}
section h3{margin-bottom:10px;color:#fff}
section #classes{width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
section #classes button{font-size:24px;height:15vh;flex-grow:1;min-width:110px;padding:1vh;margin:3vh;border-radius:10px;border:1px solid #000;background:linear-gradient(to left, rgba(255, 255, 255, 0.8) 50%, #064481 50%);background-size:200% 100%;background-position:bottom right;transform:translate3d(0, 0, 10px);transition:background-position .7s cubic-bezier(0.8, 0.18, 0.02, 1.02),transform .7s ease,box-shadow .7s ease,color .7s ease;box-shadow:5px 5px 0 #000}
section #classes button a{all:unset;width:100%;display:block}
section #classes button:hover{background-position:bottom left;transform:perspective(700px) translate3d(0, 0, 40px);box-shadow:8px 8px 5px #000;color:#fff}